<template lang="pug">
  kalix-dialog.user-add(title='修改' bizKey="lives" ref="kalixBizDialog" v-bind:formModel.sync="formModel" v-bind:targetURL="targetURL")
    div.el-form(slot="dialogFormSlot")
      el-form-item.short(label="直播分类" prop="type" v-bind:label-width="labelWidth" v-bind:rules="rules.type" )
        kalix-select(v-model="formModel.type"  v-bind:requestUrl="requestUrl" id="name" appName="classifyname" placeholder="请选择直播类别")
      el-form-item.short(label="直播人id" prop="userId" v-bind:label-width="labelWidth" v-bind:rules="rules.userId" class="none")
        el-input(v-model="formModel.userId")
      el-form-item.short(label="直播人名" prop="userName" v-bind:label-width="labelWidth" v-bind:rules="rules.userName")
        <!--el-input(v-model="formModel.userName")-->
        el-select(v-model="formModel.userId" placeholder="请选择" @change="getUid")
          el-option(v-for="item in options" v-bind:key="item.id" v-bind:label="item.name" v-bind:value="item.id")
      el-form-item.short(label="直播间地址" prop="liveUrl" v-bind:label-width="labelWidth" v-bind:rules="rules.liveUrl")
        el-input(v-model="formModel.liveUrl" readonly)
      el-form-item.short(label="直播封面图片" prop="imgUrl" v-bind:label-width="labelWidth")
        kalix-clansman-upload(:action="action" v-on:filePath="getFilePath" fileType="img" tipText="只能上传jpg/png文件")
      kalix-img-upload.img-margin(v-model="formModel.imgUrl" readonly="readonly" v-on:ImgDel="ImgDel")
      el-form-item.short(label="直播间ID" prop="liveId" v-bind:label-width="labelWidth" v-bind:rules="rules.liveId" class="none")
        el-input(v-model="formModel.liveId")
      el-form-item.short(label="直播间名称" prop="liveName" v-bind:label-width="labelWidth" v-bind:rules="rules.liveName")
        el-input(v-model="formModel.liveName")
      el-form-item.short(label="直播间位置" prop="num" type="number" v-bind:label-width="labelWidth" v-bind:rules="rules.num")
        el-input(v-model="formModel.num")
      <!--el-form-item.short(label="开播时间" prop="startTime" v-bind:label-width="labelWidth" v-bind:rules="rules.startTime")-->
        <!--el-input(v-model="formModel.startTime")-->
      <!--el-form-item.short(label="结束时间" prop="endTime" v-bind:label-width="labelWidth" v-bind:rules="rules.endTime")-->
        <!--el-input(v-model="formModel.endTime")-->
      el-form-item(label="直播状态" prop="state")
        el-radio-group(v-model="formModel.state")
          el-radio(label="开播" value="开播")
          el-radio(label="闭播" value="闭播")
</template>

<script type="text/ecmascript-6">
  import {LivesURL, ClassifyURL, LiveRoomsURL} from '../../config.toml'
  import FormModel from './model'
  import KalixClansmanUpload from '../../../../../components/fileUpload/upload'
  import {baseURL} from '../../../../../config/global.toml'
  import KalixSelect from '../../../../../components/corelib/components/common/baseSelect'
  import KalixImgUpload from '../../../../../components/corelib/components/common/imgUpload'
  export default {
    name: 'LivesEdit',
    components: {
      KalixSelect,
      KalixClansmanUpload,
      KalixImgUpload
    },
    data() {
      return {
        requestUrl: ClassifyURL,
        downloadURL: LivesURL,
        labelWidth: '150px',
        columnParam: undefined,
        action: baseURL + '/camel/rest/upload',
        formModel: Object.assign({}, FormModel),
        rules: {
          // protoNum: [{required: true, message: '请输入原住院人数', trigger: 'change'}]
        },
        targetURL: LivesURL,
        items: [],
        options: []
      }
    },
    mounted() {
      // this.findByPosition()
      this.getUname()
    },
    methods: {
      getUname() {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/users'
        }).then(res => {
          console.log('res========', res.data)
          this.options = res.data.data
        })
      },
      getUid(val) {
        let obj = {}
        obj = this.options.find((item) => {
          return item.id === val
        })
        this.formModel.userName = obj.name
        console.log('bbbbbbbbbbbbbbbbbbbbbb', this.formModel.userName)
        this.getLiveUrl(val)
      },
      getLiveUrl(uid) {
        this.axios.get(LiveRoomsURL, {
          params: {
            jsonStr: {'userId': uid}
          }
        }).then(res => {
          console.log('aaa', res.data)
          if (res.data.totalCount > 0) {
            this.formModel.liveUrl = res.data.data[0].liveUrl
          } else {
            this.formModel.liveUrl = null
          }
        })
      },
      ImgDel(imgUrl) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          let arrImg = this.formModel.imgUrl.split(',')
          console.log('arrImg++++++++++++++', arrImg)
          let idx = arrImg.indexOf(imgUrl)
          arrImg.splice(idx, 1)
          this.formModel.imgUrl = arrImg.join(',')
          console.log('this.formModel.imgUrl++++++++++++++', this.formModel.imgUrl)
          // this.filePathArr = arrImg
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      init(dialogOption) {
        console.log('---------dialogOption------------', dialogOption)
      },
      getFilePath(filePath, fileName) {
        console.log('--getFilePath---', filePath)
        console.log('--fileName---', fileName)

        this.formModel.imgUrl = filePath
        this.formModel.imgName = fileName
      }
    }
  }
</script>

<style scoped lang="stylus" type="text/stylus">
  .el-form
    width 70%
    margin auto
    .el-input
      width 110%
    .el-select
      width 110%
    .radio
      margin-left 150px
      margin-bottom 20px
      .el-radio
        color: #3465cb
        font-weight: bold
        font-size: 14px
  .img-margin
    margin-left 150px
  .none
    display none
</style>
